<template>
	<view>
		<nav-bar
			ref="navBar"
			:backState="module.liveInPage ? '1000' : '2000'"
			title="商城直播"
			:titleCenter="false"
			type="transparentFixed"
			bgColor="themeBgColor"
			fontColor="#FFF"
			transparentFixedFontColor="#FFF"
		></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <view class="bg_image_box">
                <view class="head_bg" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
                <swiper class="banner_swiper" :autoplay="true" :interval="3000" circular :duration="1000">
                    <swiper-item v-for="(item, index) of bannerList" :key="index"><image :src="item.imgUrl" mode="aspectFill" @click="onBanner(item)"></image></swiper-item>
                </swiper>
                <view class="recommend_box">
                    <image src="../../static/icon/theme/ic_recommend.png" mode="aspectFit"></image>
                    <view class="recommend_list_box">
                        <view class="recommend_list" v-for="(item, index) of recommendList" :key="index" @click="onLiveJump(item)">
                            <image :src="item.headImg" mode="aspectFit"></image>
                            <text>{{ item.name }}</text>
                        </view>
                    </view>
                </view>
                <view class="footer_bg"></view>
            </view>
            <view class="live_list_box">
                <view class="live_list" v-for="(item, index) of liveList" :key="index" @click="onLiveJump(item)">
                    <view class="live_image">
                        <image :src="item.cover" mode="aspectFill"></image>
                        <view class="state" v-if="item.liveStatus == 'appointment'">
                            <image src="../../static/icon/live/ic_subscribe.png" mode="aspectFit"></image>
                            可预约
                        </view>
                        <view class="state" v-else-if="item.liveStatus == 'live_ing'">
                            <image src="../../static/icon/live/ic_live.png" mode="aspectFit"></image>
                            直播中
                        </view>
                        <view class="state" v-else-if="item.liveStatus == 'live_end'">
                            <image src="../../static/icon/live/ic_live.png" mode="aspectFit"></image>
                            直播结束
                        </view>
                        <view class="state" v-else-if="item.liveStatus == 'playback'">
                            <image src="../../static/icon/live/ic_playback.png" mode="aspectFit"></image>
                            回放
                        </view>
                        <view class="anchor_info_box">
                            <view class="anchor_info">
                                <image :src="item.headImg" mode="aspectFill"></image>
                                <text>{{ item.name }}</text>
                            </view>
                            <view class="time">{{ item.timeBegin }}</view>
                        </view>
                    </view>
                    <view class="title">{{ item.title }}</view>
                </view>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	data() {
		return {
			statusBarHeight: 0,
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
			liveList: [],
			recommendList: [],
			bannerList: [],
			module: {}
		};
	},
	//第一次加载
	onLoad(e) {
		this.module = this.$base.module;
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		this.pageData();
		this.getRecommend();
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 轮播图点击
		onBanner(item) {
			if (item.jumpType == 1201) {
				this.setWebViewUrl(item.jumpRecord.webViewUrl);
				uni.navigateTo({
					url: '/pages/home/webView'
				});
			} else if (item.jumpType == 1301) {
				this.videoUrl = item.jumpRecord.videoUrl;
				this.videoShow = true;
			}
		},

		pageData() {
			// 轮播图接口
			this.$http
				.post('api/open/v1/lunbo', {
					locatType: 1501
				})
				.then(res => {
					this.bannerList = res;
				});
		},
		getRecommend() {
			this.$http
				.post('api/live/v1/anchor_list_data', {
					pageNo: 1,
					pageSize: 3,
					isRecommend: true
				})
				.then(res => {
					this.recommendList = res.data;
				});
		},
        /*下拉刷新的回调 */
        downCallback() {
        	//联网加载数据
        	this.loadData(1);
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        upCallback(page) {
        	//联网加载数据
        	this.loadData(page.num);
        },
        loadData(pageNo) {
            let httpData = {
                pageNo: pageNo,
                pageSize: 15,
                isRecommend: true
            };
            this.$http
            	.post('api/live/v1/live_list_data', httpData,{
            		load:false
            	}).then(res => {
            		uni.stopPullDownRefresh();
            		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
            		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
            		
            		if (pageNo == 1) {
            			this.liveList = res.data;
            		} else {
            			this.liveList = this.liveList.concat(res.data);
            		}
            	}).catch(() => {
            		//联网失败, 结束加载
            		this.mescroll.endErr();
            	});
        },
		// 直播跳转
		onLiveJump(item) {
			if (item.liveStatus == 'playback') {
				uni.navigateTo({
					url: '/pages/live/liveHistory?userUid=' + item.userUid
				});
			} else {
				uni.navigateTo({
					url: '/pages/live/liveRoom?liveNo=' + item.liveNo
				});
			}
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	onPageScroll(e) {
		this.$refs.navBar.pageScroll(e);
	},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.bg_image_box {
	padding-bottom: 176rpx;
    @include theme('gradient_bg');
    position: relative;
    .head_bg {
        height: 88rpx;
        box-sizing: content-box;
        background-image: url('../../static/icon/spike_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .footer_bg {
        background-image: url('../../static/icon/live/live_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 200rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
	.banner_swiper {
		height: 350rpx;
		swiper-item {
			image {
				width: 100%;
				height: 350rpx;
			}
		}
	}
	.recommend_box {
		margin: 24rpx 30rpx 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: flex-start;
		> image {
			width: 74rpx;
			height: 86rpx;
			flex-shrink: 0;
			margin-right: 30rpx;
		}
		.recommend_list_box {
			display: flex;
			width: calc(100% - 104rpx);
			.recommend_list {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 33.333%;
				image {
					width: 120rpx;
					height: 120rpx;
				}
				text {
					font-size: 24rpx;
					color: #333333;
					margin-top: 26rpx;
					@include toe();
				}
			}
		}
	}
}
.live_list_box {
	margin-top: -150rpx;
	padding: 0 30rpx;
	.live_list {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		.live_image {
			position: relative;
			height: 386rpx;
			> image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx 20rpx 0 0;
			}
			.state {
				position: absolute;
				top: 26rpx;
				left: 24rpx;
				border-radius: 16rpx;
				height: 36rpx;
				background-color: rgba($color: #000000, $alpha: 0.2);
				display: flex;
				align-items: center;
				font-size: 22rpx;
				color: #ffffff;
				padding-right: 12rpx;
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}
			.anchor_info_box {
				position: absolute;
				left: 0;
				bottom: 10rpx;
				padding: 0 24rpx;
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;
				background-color: rgba($color: #000000, $alpha: 0.2);
				.anchor_info {
					display: flex;
					align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 15rpx;
						border-radius: 50%;
					}
					text {
						font-size: 24rpx;
						color: #ffffff;
					}
				}
				.time {
					font-size: 24rpx;
					color: #ffffff;
					display: flex;
					align-items: center;
					&::before {
						content: '';
						width: 32rpx;
						height: 24rpx;
						@include bis('../../static/icon/live/ic_time.png');
						margin-right: 15rpx;
					}
				}
			}
		}
		.title {
			padding: 30rpx 24rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
			@include toe();
		}
	}
}
</style>
